<!-- 清空按钮区域 -->
<template>
  <div class="wrap">
    <div class="btn" @click="clearPurchased">
      清除已购买
    </div>
    <div class="flex">
      <div style="margin-right: 10px">
        已购买 {{ purchasedCount }} / 全部 {{ allCount }}
      </div>
      <input type="checkbox" v-model="isAllChecked" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { Item } from '@/types/item'

export default defineComponent({
  name: 'Footer',
  props: {
    list: {
      type: Array as PropType<Item[]>, // 也可以写成 type: Array as () => Item[]
      required: true
    },
    checkAll: {
      type: Function as PropType<(isChecked: boolean) => void>,
      required: true
    },
    clearPurchased: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    const purchasedCount = computed(() => {
      return props.list.reduce(
        // 注意 pre + (cur.purchased ? 1 : 0) 外不要加 {}，加了就报错了
        (pre: number, cur: Item) => pre + (cur.purchased ? 1 : 0), // + 优先于三元运算符，所以要加括号
        0
      )
    })
    const allCount = computed(() => {
      return props.list.length
    })
    // 全选
    const isAllChecked = computed({
      get() {
        return (
          purchasedCount.value > 0 && props.list.length === purchasedCount.value
        )
      },
      set(newVal: boolean) {
        props.checkAll(newVal)
      }
    })
    return { purchasedCount, allCount, isAllChecked }
  }
})
</script>

<style scoped lang="scss">
.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff3ee;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 14px;
  color: #fcb7a0;
  font-weight: bold;
}
.btn {
  padding: 12px 14px;
  background-color: #fcb7a0;
  color: #fff;
  border-radius: 20px;
}
.flex {
  display: flex;
  align-items: center;
}
</style>
